<html>
<head>
<title>Registration</title>
<jsp:include page="header.jsp" />

<link rel="stylesheet" href="template/css/blue.css" type="text/css" />
<link rel="stylesheet" href="template/css/blue_bg.css" type="text/css" />

<link type="text/css" rel="stylesheet" href="template/css/jscal2.css" />
<link type="text/css" rel="stylesheet"
	href="template/css/border-radius.css" />
<link rel="stylesheet" type="text/css" href="template/css/gold/gold.css" />
<script src="template/js/jscal2.js"></script>
<script src="template/js/unicode-letter.js"></script>
<script src="template/js/lang/en.js"></script>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script type="text/javascript" src="template/js/page/register.js"></script>
</head>
<body class="color_blue bg_blue width_fmax">
	<div class="center" align="center">
		<div id="area">
			<div id="leftcolumn">
				<div class="module_menu"></div>
			</div>
			<div id="maincolumn">
				<c:if test="${!empty error }">
				<!-- Display system error messages -->
				<dl id="system-message">
					<dt class="error">Error</dt>
					<dd class="error message fade">
						<ul>
							<li><c:out value="${error }"/></li>
						</ul>
					</dd>
				</dl>
				</c:if>
				<form method="post" action="register" class="form-validate"
					name="registration" onsubmit="return validation();">
					<input type="hidden" name="task" value="profile-register" />
					<!--  	<div class="componentheading">-->

					<fieldset>
						<legend>Registration</legend>
						<table class="contentpane" cellspacing="0" cellpadding="0"
							border="0" width="100%">
							<tbody>
								<tr>
									<td height="30"><label for="ssn">SSN </label>
									</td>
									<td><input name="ssn" id="ssn" type="text"
										class="inputbox validate-username" /> <span class="serr"
										id="user">*</span>
									</td>
								</tr>
								<tr>
									<td height="30"><label for="passwd">Password</label></td>
									<td><input class="inputbox" type="password" id="passwd"
										name="passwd" /> <span class="serr" id="password">*</span>
									</td>
								</tr>
								<tr>
									<td height="30"><label for="cpasswd">Confirm
											Password</label>
									</td>
									<td><input class="inputbox" type="password" id="cpasswd"
										name="cpasswd" /> <span class="serr" id="cpassword">*</span>
									</td>
								</tr>
								<tr>
									<td height="30"><label for="fName">First name</label></td>
									<td><input name="fName" id="fName" type="text"
										class="inputbox" size="15" /><span class="serr" id="fname">*</span>
									</td>
								</tr>
								<tr>
									<td height="30"><label for="lName">Last name</label>
									</td>
									<td><input name="lName" id="lName" type="text"
										class="inputbox" size="15" /><span class="serr" id="lname">*</span>
									</td>
								</tr>
								<tr>
									<td height="30"><label for="gender">Gender</label></td>
									<td><input type="radio" id="gender" name="gender"
										value="M" checked="checked" />Male <input type="radio"
										name="gender" value="F" />Female</td>
								</tr>
								<!-- 	<div id="calendar-container"></div> here we will display selection information -->

								<tr>
									<td height="30"><label for="dateOfBirth">Date of
											Birth</label>
									</td>
									<td>
										<!-- element that will contain the calendar --> <input
										type="text" name="dateOfBirth" id="dateOfBirth"
										readonly="readonly" width="10" class="inputbox" /><img
										src="template/images/calendar.png" id="calendar-trigger" /> <script
											type="text/javascript">
											Calendar.setup({
												trigger : "calendar-trigger",
												inputField : "dateOfBirth"
											});
										</script><span class="serr" id="dateOfBirth">*</span>
									</td>
								</tr>
								<tr>
									<td height="30"><label for="mobileNo">Contact no</label></td>
									<td><input type="text" name="mobileNo" id="mobileNo"
										class="inputbox" /><span class="serr" id="mobile">* </span>
									</td>
								</tr>

								<tr>
									<td height="30"><label for="emailId">Email id</label>
									</td>
									<td><input type="text" name="email" id="emailId"
										class="inputbox " /><span class="serr" id="email">* </span>
									</td>
								</tr>
								<tr>
									<td height="30"><label for="city">City</label>
									</td>
									<td><input type="text" name="city" id="city"
										class="inputbox" /> <span class="serr" id="cty">* </span>
									</td>
								</tr>
								<tr />

								<tr>
									<td height="30">Blood Group</td>
									<td><select name="bloodGroup" class="inputbox">
									<c:forEach items="O+,O-,A+,A-,B+,B-,AB+,AB-" var="item">
													<option value="${item}">${item}</option>
												</c:forEach>
									</select>
									</td>
									<td></td>
								</tr>
								<tr>
									<td height="30">Driving License</td>
									<td><input name="drivingLicence" type="text"
										class="inputbox" /><span class="serr" id="driving">* </span>
									</td>
								</tr>
								<tr>
									<td></td>
									<td height="30"><input type="submit" value="Register"
										class="button validate" height="50">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input
										type="reset" value="Clear" class="button validate" />
									</td>
								</tr>
							</tbody>
						</table>
					</fieldset>
				</form>
			</div>
		</div>
	</div>
	<jsp:include page="footer.jsp" />
</body>
</html>
